/* component */
import { BaseSelectUserFilterBreadCrumbItem } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* model */
import { BaseSelectUserBreadCrumbItem } from '@src/component/common/BaseSelectUser/components/BreadCrumb/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/BreadCrumb/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

export type BreadCrumbProps = {
  value: BaseSelectUserBreadCrumbItem[];
}

export interface BreadCrumbSetupState {
  
}

export enum BreadCrumbEmitEventNameEnum {
  Input = 'input',
  Click = 'click'
}

export type BreadCrumbInstance = ComponentInstance & BreadCrumbSetupState
export type BreadCrumbVM = ComponentRenderProxy<BreadCrumbProps> & CommonComponentInstance & BreadCrumbInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserBreadCrumb,
  emits: [
    BreadCrumbEmitEventNameEnum.Input,
    BreadCrumbEmitEventNameEnum.Click
  ],
  props: {
    value: {
      type: Array as PropType<BaseSelectUserBreadCrumbItem[]>,
      default: () => [],
      required: true
    }
  },
  setup(props: BreadCrumbProps, { emit }) {
    
    const onClickHandler = (value: BaseSelectUserBreadCrumbItem) => {
      emit(BreadCrumbEmitEventNameEnum.Click, value)
    }
    
    return {
      onClickHandler
    }
    
  },
  render(h: CreateElement) {
    return (
      <div 
        class={BaseSelectUserComponentNameEnum.BaseSelectUserBreadCrumb}
      >
        {this.value.map((item, index) => {
          
          const isFirst = index === 0
          const isLast = index === this.value.length - 1
          const isNotLast = !isLast
          
          return (
            <div class="base-select-user-bread-crumb-item__warper">
              
              <BaseSelectUserFilterBreadCrumbItem 
                key={item.value}
                text={item.text} 
                value={item.value}
                isFirst={isFirst}
                onClick={() => this.onClickHandler(item)}
              />
              
              {isNotLast && (
                <i class="iconfont icon-right1"></i>
              )}
              
            </div>
          )
          
        })}
      </div>
    )
  }
})
